Uvod

Scratch (https://scratch.mit.edu/")je programski jezik za kreiranje interaktivnih sadržaja poput igrica, priča, animacija, stimulacija i glazbe. Nastao je kao projekt Lifelong Kindergarten grupe sa MIT sveučilišta i prvi puta se pojavljuje 2005., dok je novija verzija 2.0 izašla 2013. godine. Scratch je prvenstveno namijenjen djeci od 8 do 16 godina, ali ga koriste i učitelji te roditelji. Ideja je potaknuti djecu na istraživanje, razvoj kreativnosti, ostvarivanje svojih zamisli kroz programiranje te dijeljenje svojih sadržaja s drugim korisnicima, odnosno zajednicom.

Scratch je potpuno besplatan i dostupan je za Windows, Mac i Linux operativne sustave. Preveden je na 40 jezika te se koristi u više od 150 različitih zemalja i u različitim okruženjima – kod kuće, u školama, knjižnicama, muzejima, itd. Scratch broji preko 10 milijuna korisnika.

Slika 1. - Scratch web stranica 

Registracija na Scratch

Scratch je dostupan online (https://scratch.mit.edu/), ali i offline. U nastavku će se govoriti o online verziji te će svi primjeri biti izrađeni u toj verziji, a za sve koje zanima offline verzija mogu o njoj pročitati u poglavlju Saznaj više

Isprobati Scratch moguće je i bez registracije, ali da bi istražili sve mogućnosti koje nudi potrebno se registrirati. Kako bi se registrirali potrebno je kliknuti na Join Scratch. Nakon toga se otvara prozorčić u kojem se odabiru korisničko ime i lozinka, a potom mjesec i godina rođenja, spol te država. Slijedeći korak je upisivanje e-mail adrese roditelja ili skrbnika, nakon čega ste logirani na Scratch. No, kako bi registracija bila potpuna potrebno je otići na e-mail te potvrditi registraciju.

Slika 2. - Postupak registracije na Scratch 

Upoznavanje sa sučeljem

Scratch nije klasičan programski jezik, on je vizualni programski jezik, što znači da nema klasičnog upisivanja kodova, već su oni smješteni u blokove koji se dovlače u područje skripte i slažu jedni na druge te zajedno čine cjelinu koja pokreće niz naredbi. Taj niz naredbi izvršavaju likovi na pozornici te ovisno o naredbama likovi se mogu kretati, mijenjati boju, reproducirati glazbu i slično.

No, prije nego što krenemo na vrste blokova i kako oni funkcioniraju, upoznat ćemo se s korisničkim sučeljem Scratcha. Za pokretanje Scratcha u web pregledniku, nakon što se logirate, kliknite na Kreiraj. Na prvi pogled sučelje se možda čini kompliciranim, no zapravo nije, a nakon analiziranih svih dijelova vidjet ćete da je to zaista tako.

Slika 3. - Korisničko sučelje

1

Traka izbornika

Datoteka - padajući izbornik s opcijama:

Novi projekt – započni novi projekt

Spremi – spremi projekt

Spremi kao kopiju – spremi projekt kao kopiju

Idi na Moje stvari – vodi na stranicu gdje su svi vaši projekti

Učitaj s računala – učitaj projekt s računala

Preuzmi na računalo – preuzmi projekt na računalo

Record Project Video – snimi i preuzmi video svog projekta na računalo. Može se snimiti do 60 sekundi videa.

Poništi – poništi cijeli projekt

Prepravi – padajući izbornik s opcijama:

Vrati obrisano – vraća zadnje obrisanog lika ili blok

Mali format pozornice – smanjuje veličinu pozornice

Turbo način – skripta se pokreće što je brže moguće

Natuknice – s desne strane Područja skripte otvara se dio sa savjetima i pomoć

About – vodi na stranice o Scratchu

Alatna traka – klikom na bilo koji gumb alatne trake također se mora još jednom kliknuti na lika ili blok kako bi se izvršila naredba

Korisničko ime– padajući izbornik:

Profil – otvara vaš profil

Moje stvari – otvara stranicu gdje se nalaze svi vaši projekti

Postavke računa – otvara postavke računa gdje možete mijenjati svoju lozinku i email

Odjava – odjavljuje vas sa stranice Scratcha

Dijeli – podijeli svoj projekt s drugim korisnicima

Pogledaj stranicu projekta – pregled stranice projekta kako će ga vidjeti drugi korisnici. Mogu se upisati upute, bilješke, tagovi i slično

2

Naziv projekta – proizvoljno upisati

Pozornica – mjesto na kojem se vidi kako radi skripta, tj. gdje likovi izvršavaju zadane naredbe

Koordinate x i y – ne odnose se na lika, već na strelicu miša

Popis likova – sličice i nazivi likova iz projekta

3

Skripte - blokovi organizirani po skupinama (Kretanje, Izgled, Zvuk, Olovka, Podaci, Događaji, Upravljanje, Očitanja, Operacije, Više blokova)

Kostimi – uređivanje likova, podržani formati su JPG, BMP, PNG, GIF

Zvukovi – dodavanje i uređivanje zvukova , podržani formati su MP3, WAV, AIFF, AU

4

Područje skripte – zauzima najveći dio sučelja, u taj dio se dovlače blokovi i spajaju u veće cjeline

Koordinate lika – desno gore u području skripte nalazi se sličica lika i njegove koordinate na pozornici

Zoom – gumbići desno dolje u području skripte, služe za smanjivanje i povećavanje te vračanje na početno područje skripte

Blokovi

Ranije smo spomenuli da nema potrebe ručno upisivati kodove, već su oni smješteni u blokove. Blokovi se u područje skripte „dovlače“ metodom „povuci i pusti“ (drag and drop) i većina ih ima zubić pomoću kojega se spajaju s drugim blokom poput slagalica. Ti spojeni blokovi pokreću se klikom na bilo koji od njih te pokreću niz određenih naredbi koje izvršavaju likovi na pozornici.

Postoji nekoliko vrsta blokova: obični blokovi koji se slažu jedni na druge, početni blokovi, blokovi koji omataju druge blokove te blokovi koji se stavljaju u druge blokove.

Slika 4. - Vrste blokova

Pozicioniranje i smjer kretanja likova

Likovi mogu izaći iz područja pozornice, stoga je važno da se upoznate s načinom na koji ona funkcionira. Pozicija lika se sastoji od dva broja – broj koji označava za koliko se jedinica lik kreće u lijevu ili desnu stranu i broj koji označava za koliko jedinica se lik kreće gore ili dolje od sredine pozornice. No, kada bismo zadali liku da se pomakne u lijevu stranu, da li će se pomaknuti u svoju lijevu stranu ili našu lijevu s obzirom da mi gledamo u ekran?

Pozornica koristi Kartezijev koordinatni sustav, što znači da je podijeljena na osi x i y te koristi pozitivne i negativne brojeve. Na taj način ukoliko lik treba ići u lijevu stranu imati će negativnu koordinatu po osi x.

Slika 5. - Koordinatni sustav pozornice

Početna pozicija lika, prema zadanim postavkama, ima koordinate (0, 0). Dok maksimalne veličine pozornice iznose 240 jedinica u desnu, odnosno -240 u lijevu stranu i 180 prema gore, odnosno -180 prema dolje.

Likovi u Scratchu su dvodimenzionalni i često gledaju, tj. okrenuti su prema jednom određenom smjeru. Za primjer uzmimo mačka Scratcha, koji je okrenut u desnu stranu. Kada bismo Scratchu zadali da se kreće u lijevo tada bi izgledalo kao da se kreće unatrag. Kako bi Scratch gledao u lijevu stranu potrebno ga je rotirati, tj. zaokrenuti za određeni broj stupnjeva.

Slika 6. - Smjer kretanja

Primjer 1. Crtanje geometrijskih likova

Zadatak:Nacrtaj geometrijske likove – trokut, kvadrat i šesterokut uz pomoć Scratcha.

Riješenje:

Trokut

Prvo trebamo uzeti blok spusti olovku (kategorija Olovka) kako bi se iscrtavao svaki pokret. Zatim ćemo na njega dodati blok da se mačak Scratch pomakne za 100 koraka(kategorija Kretanje). Ispod njega ćemo dodati blok skreni za 120 stupnjeva (kategorija Kretanje). Zadnja dva bloka ćemo omotati blokom ponovi 3 puta (kategorijaUpravljanje) zato što trokut ima 3 stranice.

Kvadrat

Kopirat ćemo skriptu od trokuta desnim klikom i kloniraj. Zatim ćemo promijeniti vrijednost kod skreni na 90 stupnjeva te ponovi na 4 puta.

Šesterokut

Opet možemo kopirati jednu od prethodnih skripti, a onda treba promijeniti vrijednost kod skreni na 60 stupnjeva te ponovi na 6 puta.

Primjer 2. Uhvati strelicu

Zadatak:Izradi jednostavnu igricu u kojoj mačak Scratch lovi strelicu miša. Scratch se neprestano kreće prema strelici miša za 10 koraka te svaki put kada Scratch dodirne strelicu treba se oglasiti i promijeniti boju.

Riješenje:

Za početak trebamo Scratchu zadati da se okreće prema strelici miša (kategorija Kretanje). Nakon toga da se kreće za 10 koraka (kategorija Kretanje). Zatim trebamo uzeti blok koji će omotati prva dva i ponavljati ih sve dok se nešto ne dogodi (kategorija Upravljanje).

Očekivani događaj je kada Scratch dodirne strelicu miša, stoga ćemo blok „dodiruje“ (kategorija Očitanja) staviti u blok za ponavljanje.

Blokove za ono što će se dogoditi nakon što Scratch dodrine strelicu miša stavljamo ispod bloka za ponavljanje. Odabrat ćemo blok sviraj zvuk „meow“ (kategorija Zvuk) te blok koji će promjeniti efekt „boja“ (kategorija Izgled).

Na kraju ćemo sve blokove omotati blokom za ponavljanje (kategorija Upravljanje) kako bi skripta neprestano radila. Također ćemo još dodati početni blok (kategorija Događaji) koji će pokrenuti skriptu kada se klikne na zelenu zastavicu.

Dodatno: Ako želite da igrica bude teža možete povećati broj koraka za koji će se Scratch pomaknuti na 15 ili čak 20 koraka. Također možete promijeniti boju pozadine kako bi sve to bolje izgledalo. Pokušajte samostalno!

Primjer 3. Pronađi ključ

Zadatak:Izradi igricu u kojoj ronilac treba pronaći izgubljeni ključ. Ključ mijenja svoju lokaciju svake sekunde za slučajan broj po x i y osima, sve dok ga ronilac ne pronađe. Ronilac treba reći „Yaaaay!“ kada pronađe ključ i skripta se tada treba zaustaviti. Ronilac se pokreće sa strelicama gore, dolje, lijevo, desno za 3 koraka po osima (ovisno u kojem smjeru ide) i uvijek kreće od pozicije (0, 0), okrenut prema desno. Neka se skripte pokreću klikom na zelenu zastavicu.

Riješenje:

U galeriji likova odaberemo likove ključ (Key) i ronilac (Diver1) te u galeriji pozadina pozornice podvodnu pozadinu (npr. Underwater1). Po potrebi možete podesiti veličine likova.

Ključ

Prvo ćemo uzeti blokove promijeni x i promijeni y (kategorija Kretanje). Zatim ćemo dovući blok slučajni broj (kategorija Operacije) u oba bloka. Kod postavi x u slučajni broj ćemo upisati od -240 do 240, a kod postavi y u slučajni broj -180 do 180, zato što su to maksimalne veličine pozornice i ključ se ona ne može pojaviti izvan pozornice.

Nakon toga ćemo oba bloka omotati s blokom ponavljaj dok se nešto ne dogodi (kategorija Upravljanje). Za događaj ćemo postaviti blok dodiruje s opcijom ronilac (kategorija Očitanja). Kako ključ ne bi mijenjao poziciju prebrzo, ispod bloka postavi y dodat ćemo blok čekaj 1 sekundu (kategorija Upravljanje). Na početak ćemo dodati blok za pokretanje skripte klikom na zelenu zastavicu (kategorija Događaji)

Ronilac

Prvo ćemo ga postaviti na početnu lokaciju s blokom idi na x i y s vrijednostima 0 i blokom okreni se u smjeru prema desno, odnosno 90(kategorija Kretanje).

Zatim ćemo uzeti blok ako-onda-inače (kategorija Upravljanje). Iza ako dodajemo blok dodiruje s opcijom ključ (kategorije Očitanja). Dakle, ako ronilac dodiruje ključ onda treba reći „Yaaaay!“ i skripta se zaustavlja, a to postižemo s blokovima reci (kategorija Izgled) i zaustavi ovu skriptu (kategorija Upravljanje).

U drugi dio bloka (inače) stavljamo blokove za kretanje, zato što ronilac nije pronašao ključ i treba nastaviti potragu. Dodajemo blok ako-onda (kategorija Upravljanje) i iza ako dodajemo blok tipka pritisnuta (kategorija Očitanja) te izabiremo opciju strelica gore. Zatim ispod slažemo blokove okreni se u smjer 0 (gore) te promjeni y za 3 (kategorija Kretanje). Ta skripta će ronioca pritiskom na strelicu prema gore okrenuti u smjeru prema gore te pomaknuti za 3 koraka.

Tu cijelu skriptu od bloka ako-onda ćemo klonirati tri puta (desni klik i kloniraj). U tim kloniranim skriptama ćemo onda promijeniti vrijednosti. Za prvu kloniranu skriptu: strelica prema dolje, smjer 180, y -3. Za drugu: strelica desno, smjer 90, zamijeniti blok promijeni y za blok promijeni x i postaviti na 3. Za treću: strelica lijevo, smjer -90, zamijeniti blok promijeni y za blok promijeni x i postaviti na -3. Na kraju ćemo još blok ako-onda-inače omotati s blokom ponavljaj (kategorija Upravljanje).

Saznaj više!

Scratch 2 Offline Editor

Scratch je također dostupan offline. Za offline način rada potrebno je preuzeti Scratch 2 Offline Editor (https://scratch.mit.edu/scratch2download/) i pokrenuti instalaciju. Instalacija traje nekoliko minuta i nakon toga Scratch je spreman za korištenje.

Važno je naglasiti da je jedina razlika online i offline načina rada to što kod online postoji mogućnost dijeljenja sadržaja s drugim korisnicima, dok su korisničko sučelje i sve ostale mogućnosti u potpunosti jednake.

Dodatni linkovi

U nastavku se nalazi nekoliko linkova gdje se možete zabaviti rješavanjem raznih zadataka te samim time poboljšati svoje znanje. Stranice funkcioniraju na sličan način s kojim ste se upoznali – blokovi se dovlače u područje skripte baš kao u Scratchu!

Code.org URL: https://code.org/

Code.org Anna i Elsa URL: https://studio.code.org/s/frozen/reset

Code.org Star Wars URL: https://code.org/starwars

Code.org Angry Birds URL: https://studio.code.org/hoc/1

Code.org Minecraft URL: https://code.org/mc

Literatura

Scratch

https://scratch.mit.edu/

Getting started with Scratch.

https://www.raspberrypi.org/learning/getting-startedwith-scratch/

Hummel, Joe. Learning How to Program with Scratch.

https://www.pluralsight.com/courses/learning-programming-scratch

Scratch vodič.

http://www.odrazi-se.org/scratch/Scratch_vodic.pdf